<template>
	<div class="mod-config">
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList">
		  <el-form-item>
		    <el-input  v-model="dataForm.key" placeholder="用户名称" clearable></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button>查询</el-button>
		    <el-button type="primary" @click="add()">新增</el-button>
		    <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
		  </el-form-item>
		</el-form>
		<el-table
		  :data="dataList"
		  border
		  v-loading="dataListLoading"
		  @selection-change="selectionChangeHandle"
		  style="width: 100%;">
		  <el-table-column
		    type="selection"
		    header-align="center"
		    align="center"
		    width="50">
		  </el-table-column>
		  <el-table-column
		    prop="id"
		    header-align="center"
		    align="center"
		    label="主键">
		  </el-table-column>
		  <el-table-column
		    prop="nickname"
		    header-align="center"
		    align="center"
		    label="用户昵称">
		  </el-table-column>
		  <el-table-column
		    prop="sex"
		    header-align="center"
		    align="center"
		    label="性别">
		  </el-table-column>
		  <el-table-column
		    prop="photo"
		    header-align="center"
		    align="center"
		    label="用户头像">
			<template slot-scope="scope">
			  <img width="100%" :src="scope.row.photo"/>
			</template>
		  </el-table-column>
		  <el-table-column
		    prop="phone"
		    header-align="center"
		    align="center"
		    label="手机号">
		  </el-table-column>
		  <el-table-column
		    prop="address"
		    header-align="center"
		    align="center"
		    label="收获地址">
		  </el-table-column>
		  <el-table-column
		    prop="id_number"
		    header-align="center"
		    align="center"
		    label="身份证号">
		  </el-table-column>
		  <el-table-column
		    prop="email"
		    header-align="center"
		    align="center"
		    label="电子邮箱">
		  </el-table-column>
		  <el-table-column
		    prop="balance"
		    header-align="center"
		    align="center"
		    label="余额">
		  </el-table-column>
		  <el-table-column
		    fixed="right"
		    header-align="center"
		    align="center"
		    width="150"
		    label="操作">
		    <template slot-scope="scope">
		      <el-button type="text" size="small" @click="update(scope.row.id)">修改</el-button>
		      <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
		    </template>
		  </el-table-column>
		</el-table>
		<el-pagination
		  @size-change="sizeChangeHandle"
		  @current-change="currentChangeHandle"
		  :current-page="pageIndex"
		  :page-sizes="[10, 20, 50, 100]"
		  :page-size="pageSize"
		  :total="totalPage"
		  layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>
		<!-- 新增 -->
		<el-dialog
		  :title="title"
		  :visible.sync="addOrUpdateVisible"
		  width="50%">
		  <el-form :model="addForm" ref="addForm"  label-width="80px">
			  <el-form-item label="用户账号" prop="username">
			    <el-input v-model="addForm.username" placeholder="用户账号"></el-input>
			  </el-form-item>
			  <el-form-item label="用户密码" prop="password">
			    <el-input v-model="addForm.password" placeholder="用户密码"></el-input>
			  </el-form-item>
			  <el-form-item label="用户昵称" prop="nickname">
			    <el-input v-model="addForm.nickname" placeholder="用户昵称"></el-input>
			  </el-form-item>
			  <el-form-item label="用户头像" prop="photo">
			    <el-upload
			      class="avatar-uploader"
				  action='/api/upload'
			      :show-file-list="false"
			      :on-success="handleAvatarSuccess"
			      :before-upload="beforeAvatarUpload">
			      <img v-if="addForm.photo" :src="addForm.photo" class="avatar">
			      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
			    </el-upload>
			  </el-form-item>
			  <el-form-item label="用户地址" prop="address">
			    <el-input v-model="addForm.address" placeholder="用户地址"></el-input>
			  </el-form-item>
			  <el-form-item label="手机号" prop="phone">
			    <el-input v-model.number="addForm.phone" placeholder="手机号"></el-input>
			  </el-form-item>
			  <el-form-item label="身份证" prop="id_number">
			    <el-input v-model.number="addForm.id_number" placeholder="身份证"></el-input>
			  </el-form-item>
			  <el-form-item label="邮箱" prop="email">
			    <el-input v-model.number="addForm.email" placeholder="邮箱"></el-input>
			  </el-form-item>
			  <el-form-item label="余额" prop="balance">
			    <el-input v-model="addForm.balance" placeholder="余额"></el-input>
			  </el-form-item>
			  <el-form-item label="性别" prop="sex">
			    <el-radio-group v-model="addForm.sex">
			      <el-radio-button label="0">男</el-radio-button>
			      <el-radio-button label="1">女</el-radio-button>
			    </el-radio-group>
			  </el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addOrUpdateVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dataFormSubmit()">提交</el-button>
		  </span>
		  
		</el-dialog>
	</div>	
</template>

<script>
	import axios from 'axios'
	export default{
		data(){
			return{
				dataForm:{
					key:''
				},
				addForm:{
					id:0,
					username:'',
					password:'',
					nickname:'',
					photo:'',
					address:'',
					phone:'',
					id_number:'',
					email:'',
					balance:'',
					sex:0
				},
				dataListSelections: [],
				title:'',
				pageIndex: 1,
				pageSize: 10,
				totalPage: 0,
				dataList: [],
				dataListLoading: false,
				addOrUpdateVisible:false
			}
		},	
		created () {
		  this.getDataList()
		},
		methods:{
			getDataList(){
				axios({
					url:'/api/yonghu/page',
					methods:'get',
					params:{
						'currPage':this.pageIndex,
						'pageSize':this.pageSize,
						'key':this.dataForm.key
					}
				}).then(res=>{
					console.log(res.data)
					if(res.data.code === 0){
						this.dataList = res.data.page.list
						this.totalPage = res.data.page.totalPage
					}else {
						this.dataList = []
						this.totalPage = 0
					}
					this.dataListLoading = false
				}).catch(e=>{
					console.log(e)
				})
			},
			handleAvatarSuccess(res, file) {
			  this.addForm.photo = res.data.url
			},
			//上传图片之前校验
			beforeAvatarUpload(file) {
			  const isJPG = file.type === 'image/jpeg';
			  const isLt2M = file.size / 1024 / 1024 < 2;
			
			  if (!isJPG) {
			    this.$message.error('上传头像图片只能是 JPG 格式!');
			  }
			  if (!isLt2M) {
			    this.$message.error('上传头像图片大小不能超过 2MB!');
			  }
			  return isJPG && isLt2M;
			},
			// 每页数
			sizeChangeHandle (val) {
			  this.pageSize = val
			  this.pageIndex = 1
			},
			// 当前页
			currentChangeHandle (val) {
			  this.pageIndex = val
			},
			//多选
			selectionChangeHandle(val){
				this.dataListSelections = val
			},
			//新增
			add(){
				this.title = '新增用户'
				this.addOrUpdateVisible = true
			},
			//修改
			update(id){
				this.title = '修改用户'
				this.addOrUpdateVisible = true
				this.addForm.id = id
				//查询信息
				axios({
					url:'/api/yonghu/info/'+id,
					method:'get'
				}).then(res=>{
					console.log(res.data.yonghu)
					if(res.data.code === 0){
						const yonghu = res.data.yonghu
						this.addForm.nickname = yonghu.nickname
						this.addForm.photo = yonghu.photo
						this.addForm.address = yonghu.address
						this.addForm.phone = yonghu.phone
						this.addForm.id_number = yonghu.id_number
						this.addForm.email = yonghu.email
						this.addForm.balance = yonghu.balance
						this.addForm.sex = yonghu.sex
					}
				})
			},
			//新增提交信息
			dataFormSubmit(){
				if(this.title === '新增用户'){
					axios({
						url:'/api/yonghu/addYonghu',
						method:'post',
						data:{
							'username':this.addForm.username,
							'password':this.addForm.password,
							'nickname':this.addForm.nickname,
							'photo':this.addForm.photo,
							'address':this.addForm.address,
							'phone':this.addForm.phone,
							'id_number':this.addForm.id_number,
							'email':this.addForm.email,
							'balance':this.addForm.balance,
							'sex':this.addForm.sex,
						}
					}).then(res=>{
						console.log(res)
						if(res.data.code === 0){
							this.$message({
							  message: '操作成功',
							  type: 'success',
							  duration: 1500,
							  onClose: () => {
							    this.addOrUpdateVisible = false
							    this.getDataList()
							  }
							})
						}
					}).catch(e=>{
						console.log(e)
					})
				}else if(this.title === '修改用户'){
					axios({
						url:'/api/yonghu/updateYonghu',
						method:'post',
						data:{
							'id':this.addForm.id,
							'username':this.addForm.username,
							'password':this.addForm.password,
							'nickname':this.addForm.nickname,
							'photo':this.addForm.photo,
							'address':this.addForm.address,
							'phone':this.addForm.phone,
							'id_number':this.addForm.id_number,
							'email':this.addForm.email,
							'balance':this.addForm.balance,
							'sex':this.addForm.sex,
						}
					}).then(res=>{
						console.log(res)
						if(res.data.code === 0){
							this.$message({
							  message: '操作成功',
							  type: 'success',
							  duration: 1500,
							  onClose: () => {
							    this.addOrUpdateVisible = false
							    this.getDataList()
							  }
							})
						}
					}).catch(e=>{
						console.log(e)
					})
				}
			},
			//删除
			deleteHandle(id){
				var ids = id ? [id] : this.dataListSelections.map(item => {
				  return item.id
				})
				this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(()=>{
					axios({
						url:'/api/yonghu/delete',
						method:'post',
						data:ids
					}).then(res=>{
						if(res.data.code === 0){
							this.$message({
							  message: '操作成功',
							  type: 'success',
							  duration: 1500,
							  onClose: () => {
							    this.getDataList()
							  }
							})
						}else{
							this.$message.error(data.msg)
						}
					})
				})
			}
		}
	}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 128px;
    text-align: center;
  }
  .avatar {
    width: 128px;
    height: 128px;
    display: block;
  }
</style>